﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>sign in</title>
    <link href="css/sign_in.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <script type="text/javascript" src="js/nav.js"></script>
    <script type="text/javascript" src="js/sgin_in.js"></script>
</head>
<body>
    <div class="container">
        <div class="nav">
            <ul>
                <li id="dh"><a href="index.html">Coldplay</a></li>
                <li>
                    <ul id="droplist_ul">
                        <li id="n0"><a href="index.html">首页</a></li>
                        <li id="n1"></li>
                        <li id="n2">
                            <a href="products.html">产品展示</a>
                            <ul id="n2_show">
                                <li>
                                    <ul>
                                        <li><span>MY COLDPLAY</span></li>
                                        <li><span>APPAREL</span></li>
                                        <li><span>ART</span></li>
                                        <li><span>VINYL</span></li>
                                        <li><span>CD</span></li>
                                        <li><span>ACCESSORIES</span></li>
                                    </ul>
                                </li>
                                <li>
                                    <img src="img/product_list.jpg" />
                                </li>
                            </ul>
                        </li>
                        <li id="n3"></li>
                        <li id="n4"><a href="profile.html">关于Coldplay</a></li>

                    </ul>
                </li>
                <li>
                    <ul class="droplist_ul">
                        <li id="n5">
                            <a href="sign_in.html">Account</a>
                            <ul id="n5_show">
                                <li>
                                    <h3>会员登陆</h3>
                                    <h4>我拥有一个账户</h4>
                                    <form action="">
                                        <label for="">用户名*</label>
                                        <input type="text"><br>&nbsp;&nbsp;
                                        <label id="special1" for="">密码*</label>
                                        <input type="password"><br>
                                        <label for=""><span>忘记密码?</span></label><br>
                                        <input type="submit" value="提交" class="submit">
                                    </form>
                                </li>
                                <li>
                                    <ul>
                                        <li>我没有注册过任何账户</li>
                                        <li>创建个人账户以获取更多专属特权和丰富体验</li>
                                        <li><a href="sign_in.html">创建我的Coldplay账户</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="bg">
            <div class="shell">
                <div class="top">
                    <span class="off">SIGN IN</span>
                    <div class="button">
                        <div class="ball"></div>
                    </div>
                    <span class="on">SIGN UP</span>
                </div>

                <div class="bottom">
                    <div class="signIn">
                        <h2>Sign in</h2>
                        <input type="text" placeholder="Username">
                        <input type="text" placeholder="Password">
                        <button>GO</button>
                    </div>
                    <div class="signUp">
                        <h2>Sign up</h2>
                        <input type="text" placeholder="Username">
                        <input type="text" placeholder="Password">
                        <input type="text" placeholder="Confirm password">
                        <button>GO</button>
                    </div>
                </div>
            </div>
            <script>
                let button = document.querySelector('.button')
                let ball = document.querySelector('.ball')
                let bottom = document.querySelector('.bottom')
                let off = document.querySelector('.off')
                let on = document.querySelector('.on')
                let index = 0
                button.addEventListener('click', () => {
                    if (index == 0) {
                        index = 1
                        ball.style.left = 61 + '%'
                        on.style.opacity = 1
                        off.style.opacity = .5
                        bottom.style.transform = "rotateY(180deg)"
                    } else {
                        index = 0
                        ball.style.left = 0
                        on.style.opacity = .5
                        off.style.opacity = 1
                        bottom.style.transform = "rotateY(0deg)"
                    }
                })
            </script>
        </div>
    </div>
    <div >
        <footer class="foot2">
            <p>Copyright@www.coldplay.com</p>
            <p>Images from Twitter of Coldplay and Weibo of Coldplay_CN</p>
            <p>For personal final presentation only</p>
        </footer>
    </div>
</body>
</html>